<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pic-gallery</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <script>
        document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/3 + 'px';
    </script>
    <style>
        body,ul{margin:0;padding:0; font-size:0.15rem; font-family:Arial,"宋体";}
        a{ text-decoration:none;color:#fff;}
        li{
            list-style: none;
        }
        .page {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
        }

        header{
            height: 0.45rem;
            line-height: 0.45rem;
            text-align: center;

            border-top: 2px solid #353535;
            border-bottom: 2px solid #353535;
            
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            background: -webkit-linear-gradient(top, #292929, #1e1e1e);
            background: -moz-linear-gradient(top, #292929, #1e1e1e);
            background: linear-gradient(top, #292929, #1e1e1e);

            color: #ffffff;
        }

        .btn {
            width: 0.5rem;
            height: 0.25rem;
            position: absolute;
            top: 0.05rem;
            right: 10px;

            border: 2px solid #0d0d0d;
            line-height: 0.25rem;
            border-radius: 5px;
            box-shadow: 0 0 3px #0d0d0d, inset 0 0 2px #232323;
        }
        .btn:first-child {
            left: 10px;
            display: none;
        }

        .wrap {
            position: absolute;
            left: 0;
            width: 100%;
            top: 0.45rem;
            bottom: 0.55rem;
            overflow: auto;
        }

        footer {
            height: 0.55rem;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;

            background: #000;
            background: -webkit-linear-gradient(top, #1e1f21, #121212);
            background: -moz-linear-gradient(top, #1e1f21, #121212);
            background: linear-gradient(top, #1e1f21, #121212);
            line-height: 0.55rem;
        }
        footer a{
            float: left;
            width: 50%;
            text-align: center;
            box-sizing: border-box;
        }
        footer a:nth-of-type(1){border-right:1px solid #222222;}
        footer a:nth-of-type(2){border-left:1px solid #222222;}
        footer a.active {
            background: -webkit-linear-gradient(top, #101010, #070707);
            background: -moz-linear-gradient(top, #101010, #070707);
            background: linear-gradient(top, #101010, #070707);
            border-color: #0e0e0e;
        }

        .pic_list li{
            float: left;
            width: 1rem;
            height: 1rem;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #000;
        }
        .pic_list li img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="page">
        <header>
            <a href="javascript:;" class="btn">删除</a>
            相机相册
            <a href="javascript:;" class="btn">选择</a>
        </header>

        <section class="wrap">
            <ul class="pic_list">
                <li><img src="video/1.jpg" alt=""></li>
                <li><img src="video/2.jpg" alt=""></li>
                <li><img src="video/3.jpg" alt=""></li>
                <li><img src="video/4.jpg" alt=""></li>
                <li><img src="video/5.jpg" alt=""></li>
                <li><img src="video/6.jpg" alt=""></li>
                <li><img src="video/7.jpg" alt=""></li>
                <li><img src="video/8.jpg" alt=""></li>
                <li><img src="video/9.jpg" alt=""></li>
                <li><img src="video/10.jpg" alt=""></li>
                <li><img src="video/11.jpg" alt=""></li>
                <li><img src="video/12.jpg" alt=""></li>
                <li><img src="video/13.jpg" alt=""></li>
                <li><img src="video/14.jpg" alt=""></li>
                <li><img src="video/15.jpg" alt=""></li>
                <li><img src="video/16.jpg" alt=""></li>
            </ul>
        </section>

        <footer>
            <a href="javascript:;" class="active">相机相册</a>
            <a href="javascript:;">手机相册</a>
        </footer>

        <sapn class="recyle"></sapn>
        <span class="recyle"></span>
    </div>

    <script>
        var ul = document.getElementsByClassName('pic_list').item(0);
        var lis = document.getElementsByTagName('li');
        var btn = document.getElementsByClassName('btn');
        var del = [];
        var flag = false;

        btn[1].addEventListener('touchend', function () {
            if(!flag){
                btn[1].innerHTML = '取消';
                btn[0].style.display = 'block';

                for(var i = 0; i<lis.length; i++){
                    lis[i].index = i;
                    lis[i].addEventListener('touchend', function () {
                        if(this.style.opacity == "0.3"){
                            del.splice(del.indexOf(this.index),1);
                            this.style.opacity = '1';
                            this.style.borderColor = '#000';
                        }else{
                            this.style.opacity = '0.3';
                            this.style.borderColor = '#fff';
                            del.push(this.index);
                        }


                        console.log(del)
                    })
                }

                btn[0].addEventListener('touchend', function () {
                    del.sort();

                    var length = del.length;
                    console.log(del)
                    for(var i = 0; i<length; i++){
                        var m = del.pop();
                        ul.removeChild(lis[m]);
                    }
                    del = [];
                    console.log(del)
                })

            }else{
                btn[0].style.display = 'none';
                btn[1].innerHTML = '选择';

                del = [];
            }

            flag = !flag;
        },false)
    </script>
</body>
</html>